<template>
  <div id="modify">
    <h1 style="margin-bottom: 16px">开票信息</h1>
    <div class="from_wrap">
      <el-form label-width="170px" class="from">
        <el-form-item label="发票抬头(公司名称)：" required style="margin-bottom: 12px !important">
          <el-input size="small" placeholder="" v-model.trim="billingFrom.rise"> </el-input>
        </el-form-item>

        <el-form-item label="纳税人识别号：" required style="margin-bottom: 12px !important">
          <el-input size="small" placeholder="" v-model.trim="billingFrom.taxpayerCode"> </el-input>
        </el-form-item>

        <el-form-item label="开户银行：" required style="margin-bottom: 12px !important">
          <el-input size="small" placeholder="" v-model.trim="billingFrom.bankOfDeposit"> </el-input>
        </el-form-item>
        <el-form-item label="开户账号：" required style="margin-bottom: 12px !important">
          <el-input size="small" placeholder="" v-model.trim="billingFrom.accountNumber"> </el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="170px" class="from">
        <el-form-item label="开票电话：" required style="margin-bottom: 12px !important">
          <el-input size="small" placeholder="" v-model.trim="billingFrom.drawerPhone"> </el-input>
        </el-form-item>
        <el-form-item label="公司地址：" required class="address" style="margin-bottom: 12px !important">
          <el-select
            class="select"
            style="width: 150px"
            size="small"
            v-model.trim="billingFrom.provinceId"
            placeholder="请选择"
            @change="provinceChange"
          >
            <el-option v-for="item in provinceOptions" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
          <el-input
            type="textarea"
            size="small"
            placeholder=""
            v-model.trim="billingFrom.address"
            class="address_input"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <h1>法人信息</h1>
    <div class="from_wrap">
      <el-form label-width="170px" class="commonFrom">
        <el-form-item
          label="法人姓名："
          required
          style="margin-top: 9px; width: 100% !important; margin-bottom: 16px !important"
        >
          <el-input size="small" placeholder="" v-model.trim="billingFrom.legalPerson"> </el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="170px" class="commonFrom">
        <el-form-item
          label="法人身份证号："
          required
          style="margin-bottom: 16px !important; margin-top: 9px; width: 100% !important"
        >
          <el-input size="small" placeholder="" v-model.trim="billingFrom.legalPersonId"> </el-input>
        </el-form-item>
      </el-form>
    </div>

    <h1>
      证件上传<span>（限JPG/PNG格式，单张不可超过10M）</span> <span class="check">查看法人证件照示例</span>
      <div class="test_case">
        <p>法人身份证：法人证件照处需上传身份证复印件， 正反面都要并加盖公章和法人签名。</p>
        <img src="" alt="" />
      </div>
    </h1>
    <div class="zj_wrap">
      <div class="upload-wrap">
        <el-upload
          class="upload-demo"
          :headers="loadHeader"
          :multiple="false"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png"
          :action="urlUpload"
          :on-remove="fileRemove"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload"
        >
          <img v-if="billingFrom.businessLicense" :src="billingFrom.businessLicense" class="avatar" />
          <i class="iconfont icon-xiangji2" v-else></i>
        </el-upload>
        <div class="upload_title">营业执照</div>
      </div>
      <div class="upload-wrap">
        <el-upload
          class="upload-demo"
          :headers="loadHeader"
          :multiple="false"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png"
          :action="urlUpload"
          :on-remove="fileRemoveTwo"
          :on-error="uploadError"
          :on-success="uploadSuccessTwo"
          :before-upload="beforeUploadTwo"
        >
          <img v-if="billingFrom.idPhoto" :src="billingFrom.idPhoto" class="avatar" />
          <i class="iconfont icon-xiangji2" v-else></i>
        </el-upload>
        <div class="upload_title">法人证件照</div>
      </div>
    </div>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    updateFrom: {
      type: Object
    }
  },
  data() {
    return {
      provinceOptions: [],
      billingFrom: {
        legalPerson: '',
        legalPersonId: '',
        province: '',
        address: '',
        rise: '',
        businessLicense: '',
        idPhoto: '',
        bankOfDeposit: '',
        accountNumber: '',
        drawerPhone: '',
        taxpayerCode: '',
        provinceId: ''
      },
      urlUpload: this.GLOBAL.weburl + '/api/file/upload',
      fileSuccess: true,
      fileSuccessTwo: true
    }
  },
  computed: {
    loadHeader() {
      let token = this.common.getCookie('materialsToken')
      const header = {}
      header[this.GLOBAL.tokenName] = token
      return header
    }
  },
  mounted() {
    this.getSelect()
  },
  methods: {
    closeBtn() {
      this.$emit('close', '')
    },
    subBtn() {
      // 校验未完善
      if (!this.fileSuccess || !this.fileSuccessTwo) {
        this.$message.error('请等待文件上传完毕')
        return
      }
      const keyArr = [
        { label: '发票抬头', value: 'rise' },
        { label: '开票电话', value: 'drawerPhone' },
        { label: '纳税人识别号', value: 'taxpayerCode' },
        { label: '省份', value: 'provinceId' },
        { label: '公司地址', value: 'address' },
        { label: '开户银行', value: 'bankOfDeposit' },
        { label: '开户账号', value: 'accountNumber' },
        { label: '法人身份证号', value: 'legalPersonId' },
        { label: '营业执照', value: 'businessLicense' },
        { label: '法人证件照', value: 'idPhoto' },
        { label: '法人姓名', value: 'legalPerson' }
      ]
      let msg = ''
      for (let i = 0; i < keyArr.length; i++) {
        if (!this.billingFrom[keyArr[i].value]) {
          msg = keyArr[i].label + '不能为空'
          break
        } else {
          if (keyArr[i].value == 'drawerPhone') {
            msg = this.common.fieldTest('phone', this.billingFrom[keyArr[i].value]) ? '' : '手机号格式不正确'
            if (!msg) continue
            this.billingFrom[keyArr[i].value] = ''
            break
          } else if (keyArr[i].value == 'taxpayerCode') {
            if (this.billingFrom[keyArr[i].value].length >= 15 && this.billingFrom[keyArr[i].value].length <= 20) {
              msg = ''
            } else {
              msg = '请输入15到20位之间的纳税人识别号'
            }
            if (!msg) continue
            this.billingFrom[keyArr[i].value] = ''
            break
          }
        }
      }
      if (msg) {
        this.$message.error(msg)
        return
      }

      this.saveBilling()
    },
    provinceChange(val) {
      this.provinceOptions.forEach(element => {
        if (val == element.value) {
          this.billingFrom.province = element.name
        }
      })
    },
    saveBilling() {
      let url = '/invoiceHeader/addInvoiceHeader'
      if (this.updateFrom && JSON.stringify(this.updateFrom) != '{}') {
        url = '/invoiceHeader/updInvoiceHeader'
      }
      this.$https({
        method: 'post',
        url: url,
        data: this.billingFrom
      })
        .then(res => {
          if (res.code == 0) {
            this.$emit('close', 'init')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取省份
    getSelect() {
      this.$https({
        method: 'post',
        url: '/province/getAllProvince'
      })
        .then(res => {
          // console.log(res)
          if (res.code == 0) {
            this.provinceOptions = res.data
            if (this.updateFrom && JSON.stringify(this.updateFrom) != '{}') {
              this.billingFrom = {}
              this.getDataDetail()
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDataDetail() {
      this.$https({
        method: 'post',
        url: '/invoiceHeader/getInvoiceHeaderById?id=' + this.updateFrom.id
      })
        .then(res => {
          if (res.code == 0) {
            this.billingFrom = res.data
            this.billingFrom.provinceId = this.billingFrom.provinceId + ''
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 删除文件
    fileRemove(file, files) {},

    // 删除文件
    fileRemoveTwo(file, files) {},

    // 文件上传前进行文件大小检测
    beforeUpload(file) {
      // 文件未上传完毕不能提交
      this.fileSuccess = false
      const isLt = file.size / 1024 / 1024 / 10 <= 1
      if (!isLt) {
        this.$message.error('单个文件大小不能超过10M,请检查文件大小并重新尝试')
      }
      return isLt
    },
    // 文件上传前进行文件大小检测
    beforeUploadTwo(file) {
      // 文件未上传完毕不能提交
      this.fileSuccessTwo = false
      const isLt = file.size / 1024 / 1024 / 10 <= 1
      if (!isLt) {
        this.$message.error('单个文件大小不能超过10M,请检查文件大小并重新尝试')
      }
      return isLt
    },

    // 营业执照上传成功时的回调
    uploadSuccess(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.billingFrom.businessLicense = e.response.data
      this.fileSuccess = true
      this.$message.success('上传成功')
    },
    // 法人身份证照上传成功时的回调
    uploadSuccessTwo(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.billingFrom.idPhoto = e.response.data
      this.fileSuccessTwo = true
      this.$message.success('上传成功')
    },

    // 文件上传失败时的回调
    uploadError(err, file, fileList) {
      console.log(err)
    }
  }
}
</script>
<style lang="less" scoped>
#modify {
  .check:hover + .test_case {
    display: block;
  }
  .footer {
    .commonBtn,
    .commonBtn1 {
      width: 130px;
    }
    text-align: center;
    margin-top: 40px;
  }
  .test_case {
    display: none;
    position: absolute;
    height: 250px;
    width: 300px;
    background-color: #fff;
    left: 500px;
    top: -100px;
    border-radius: 5px;
    border: 1px solid #ebebeb;
    box-shadow: 4px 4px 5px #888888;
    padding: 30px 20px 20px;
    p {
      color: #333;
      font-size: 14px;
    }
    img {
      height: 212px;
      width: 100%;
    }
  }
  .from_wrap {
    display: flex;
    .select {
      width: 150px;
      /deep/ .el-input__inner {
        width: 100% !important;
      }
    }

    .address_input {
      width: 280px;
      margin-top: 16px;

      /deep/.el-input__inner {
        width: 100% !important;
      }
      /deep/ .el-textarea__inner {
        height: 84px;
        max-height: 84px;
      }
    }
    // flex-direction: column;
  }
  h1 {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
    span {
      font-size: 14px;
      font-weight: normal;
      color: #999;
    }
    .check {
      font-weight: 400;
      font-size: 14px;
      color: #fa7355;
    }
  }
  .from {
    /deep/.el-input__inner {
      width: 280px !important;
    }
  }
  .commonFrom {
    margin-top: 7px;
    width: 100%;
    /deep/.el-form-item {
      width: 50% !important;
      margin-bottom: 7px !important;
    }

    // .form-item {
    //   width: 100% !important;
    //   /deep/.el-form-item__content {
    //     display: flex;
    //   }
    //   .el-input {
    //     width: 290px !important;
    //   }
    // }
    /deep/.el-input__inner {
      width: 280px !important;
    }
    // .select {
    //   width: 150px;
    //   margin-right: 30px;
    //   display: inline-block;
    //   /deep/ .el-input__inner {
    //     width: 100% !important;
    //   }
    // }
    // .address_input {
    //   display: inline-block;
    //   width: 110px;
    // }

    .performance_text {
      color: #999;
      font-size: 14px;
    }
    .icon-guanbianniu {
      font-size: 16px;
      cursor: pointer;
      margin-left: 10px;
    }
    .icon-guanbianniu:hover {
      color: #fa7355;
    }
  }
  .icon-xiangji2 {
    font-size: 44px;
  }
  .zj_wrap {
    position: relative;
    display: flex;
  }
  .upload-wrap {
    margin-top: 20px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 140px;
    /deep/ .el-upload {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 140px;
      height: 140px;
    }
    .upload_title {
      margin-top: 10px;
      font-size: 14px;
      color: #333;
    }
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
  /deep/.el-upload--picture-card:hover,
  /deep/.el-upload:focus {
    border-color: #fa7355;
    color: #fa7355;
  }
}
</style>
